<template>
  <div class="topicMediation-main">
    <div class="item-top-box">
      <div class="item-top-box-title"></div>
      <div class="detail-btn">详情<i class="el-icon-caret-right"></i></div>
    </div>
    <div class="item-center">
      <dv-border-box-7 :color="['#0054A3', '#2BCCFF']">
        <div id="topicMediation-main-echarts"></div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

// 不同主题调解情况
export default {
  name: 'TopicMediation',
  data() {
    return {
      //
    };
  },
  mounted() {
    let myChart = echarts.init(document.getElementById('topicMediation-main-echarts'))
    // Mock数据
    const mockData = {
      xdata: [...new Array(33)].map((item, i) => `村调委会${i + 1}`),
      result: [
        {
          name: '案件数',
          data: [...new Array(33)].map(
            (item, i) => +(Math.random(0, 10) * 1000).toFixed(0)
          )
        },
        {
          name: '成功数',
          data: [...new Array(33)].map(
            (item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)
          )
        }
      ]
    };

    const color = [
      [
        { offset: 0, color: 'rgba(239, 255, 55, .85)' },
        { offset: 0.5, color: 'rgba(239, 255, 55, .85)' },
        { offset: 0.5, color: 'rgba(213, 231, 0, .9)' },
        { offset: 1, color: 'rgba(213, 231, 0, .9)' }
      ],
      [
        { offset: 0, color: 'rgba(50, 255, 238, .85)' },
        { offset: 0.5, color: 'rgba(50, 255, 238, .85)' },
        { offset: 0.5, color: 'rgba(0, 216, 198, .9)' },
        { offset: 1, color: 'rgba(0, 216, 198, .9)' }
      ]
    ];
    const color2 = ['#efff37', '#32ffee'];

    // tooltip
    const tooltip = {
      trigger: 'axis',
      textStyle: { fontSize: '100%' },
      formatter: (params) => {
        let rander = params
          .map((item) => `<div>${item.seriesName}: ${item.value}</div>`)
          .join('');
        return rander;
      }
    };

    const legend = {
      data: ['案件数', '成功数'],
      textStyle: { fontSize: 12, color: '#fff' },
      itemWidth: 24,
      itemHeight: 15,
      itemGap: 15,
      top: '2%',
      right: '2%',
      selectedMode: false
    };
    const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' };
    // xAxis
    const xAxis = {
      axisTick: { show: true },
      axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)'  } },
      axisLabel: {
        rotate: 60,
        textStyle: { fontSize: 12, color: '#fff' }
      },
      data: mockData.xdata
    };

    // yAxis
    const yAxis = [
      {
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)', type: 'dashed' } },
        axisLabel: { textStyle: { fontSize: 14, color: '#fff' } }
      },
      {
        show: false,
        splitLine: { show: false },
        axisLine: { show: false },
        axisTick: { show: false }
      }
    ];
    const diamondData = mockData.result.reduce((pre, cur, index) => {
      pre[index] = cur.data.map(
        (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
      );
      return pre;
    }, []);

    let series = mockData.result.reduce((p, c, i, array) => {
      p.push(
        {
          z: i + 1,
          stack: '总量',
          type: 'bar',
          name: c.name,
          barGap: '-100%',
          barWidth: 24,
          data: c.data,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: color[i]
            }
          }
        },
        {
          z: i + 10,
          type: 'pictorialBar',
          symbolPosition: 'end',
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [24, 10],
          data: diamondData[i],
          itemStyle: { color: color2[i] },
          tooltip: { show: false }
        }
      );

      // 是否最后一个了？
      if (p.length === array.length * 2) {
        p.push({
          z: array.length * 2,
          type: 'pictorialBar',
          symbolPosition: 'start',
          data: mockData.result[0].data,
          symbol: 'diamond',
          symbolOffset: ['0%', '50%'],
          symbolSize: [24, 10],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: color[0]
            }
          },
          tooltip: { show: false }
        });
        return p;
      }

      return p;
    }, []);

    const dataZoom = [
      {
        show: false,
        type: 'slider',
        startValue: 0,
        endValue: 7,
        moveOnMouseWheel: true,
        moveOnMouseMove: true,
        zoomOnMouseWheel: false
      }
    ];
    let option = {
      tooltip,
      legend,
      xAxis,
      yAxis,
      series,
      grid,
      dataZoom,
      // backgroundColor: 'rgba(0, 0, 0, .8)'
    };

     myChart.setOption(option)

    // 定时器
    let timer = null;
    // 轮询
    function poll(startValue = 0, endValue = 7) {
      timer = setInterval(() => {
        // 如果是最后一个？
        if (endValue >= 33) {
          // 还原
          myChart.dispatchAction({
            type: 'dataZoom',
            startValue: (startValue = 0),
            endValue: (endValue = 7)
          });
        } else {
          // 轮播
          myChart.dispatchAction({
            type: 'dataZoom',
            startValue: (startValue += 7),
            endValue: (endValue += 7)
          });
        }
      }, 3 * 1000);
    }

    // 加入移入移出事件
    myChart.on('mouseover', function () {
      clearInterval(timer);
    });

    myChart.on('mouseout', function () {
      const { startValue, endValue } = myChart.getModel().option.dataZoom[0];
      poll(startValue, endValue);
    });

    // 启动轮询
    poll(0, 7);
  }
};
</script>

<style scoped>
.topicMediation-main {
  height: 92.5%;
  width: 98%;
  padding: 0px 0px 20px 10px;
}
.topicMediation-main .item-top-box {
  display: flex;
  flex-direction: row;
  position: relative;
}
.topicMediation-main .item-top-box-title {
  background-image: url('~@/assets/title4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  height: 32px;
  width: 100%;
}
/* 详情 */
.topicMediation-main .item-top-box .detail-btn {
  font-size: 16px;
  font-family: BBT;
  font-weight: normal;
  color: #2bccff;
  position: absolute;
  right: 0;
  cursor: pointer;
}
/* 内容区域 */
.topicMediation-main .item-center {
  height: 90%;
  width: 100%;
  padding: 5px 0px;
}
#topicMediation-main-echarts {
  height: 100%;
  width: 100%;
}
</style>
